<template>
  <div class="profile-container">
    <!-- 头部信息 -->
    <div class="profile-header">
      <div class="avatar-wrapper">
        <img 
          :src="user.avatar || 'https://tse2-mm.cn.bing.net/th/id/OIP-C.p6hdmBEvZCMwVcWDVnQr0QAAAA?rs=1&pid=ImgDetMain'" 
          alt="头像" 
          class="avatar"
        />
        <button @click="showAvatarUpload = true" class="edit-avatar-btn">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
            <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
          </svg>
          更换头像
        </button>
      </div>
      <h1 class="username">{{ user.name }}</h1>
      <p class="bio">{{ user.bio || '这个人很懒，什么都没写~' }}</p>
      <div class="stats">
        <div class="stat-item">
          <span class="stat-number">1,234</span>
          <span class="stat-label">粉丝</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">567</span>
          <span class="stat-label">关注</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">89</span>
          <span class="stat-label">文章</span>
        </div>
      </div>
    </div>

    <!-- 个人信息表单 -->
    <div class="profile-form">
      <div class="form-header">
        <h2><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
        </svg> 个人信息</h2>
      </div>
      <form @submit.prevent="saveProfile">
        <div class="form-group">
          <label>用户名</label>
          <input 
            v-model="editableUser.name" 
            type="text" 
            placeholder="请输入用户名"
          />
        </div>
        
        <!-- 新增手机号字段 -->
        <div class="form-group">
          <label>手机号</label>
          <input 
            v-model="editableUser.phone" 
            type="tel" 
            placeholder="请输入手机号"
          />
        </div>
        
        <!-- 新增密码字段 -->
        <div class="form-group">
          <label>修改密码</label>
          <input 
            v-model="newPassword" 
            type="password" 
            placeholder="请输入新密码（不修改则留空）"
          />
        </div>
        
        <div class="form-group">
          <label>邮箱</label>
          <input 
            v-model="editableUser.email" 
            type="email" 
            placeholder="请输入邮箱"
            disabled
          />
        </div>
        <div class="form-group">
          <label>个人简介</label>
          <textarea 
            v-model="editableUser.bio" 
            placeholder="介绍一下自己吧"
          ></textarea>
        </div>

        <!-- 地址编辑区域 -->
        <div class="form-group address-section" style="background: #f8f9fa; padding: 25px; border-radius: 12px; margin-top: 30px;">
          <h3 class="address-title"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M8.256 14.083c-.338.491-1.343.491-1.68 0l-.654-.995a6.5 6.5 0 1 0-1.789 1.01L8 14.75l3.303-1.662a6.5 6.5 0 1 0-1.789-1.01l-.651.995zm-1.657-.245a5.001 5.001 0 0 1-4.5-3.699V3.717c0-1.13.91-2.028 2.029-2.028h1.744A2.029 2.029 0 0 1 8 5.717v2.475c0 .246.207.453.453.453h1.106a5.002 5.002 0 0 1-4.043 3.795z"/>
          </svg> 常用地址</h3>

          <!-- 地址列表 -->
          <div v-if="editableUser.addresses.length" class="address-list">
            <div v-for="(address, index) in editableUser.addresses" :key="index" class="address-item">
              <div class="address-content">
                <p class="address-detail">{{ address.detail }}</p>
                <div v-if="address.isDefault" class="default-tag">默认</div>
              </div>
              <div class="address-actions">
                <button @click="editAddress(index)" class="edit-btn">编辑</button>
                <button @click="deleteAddress(index)" class="delete-btn">删除</button>
                <button 
                  @click="setDefaultAddress(index)" 
                  class="default-btn"
                  :class="{ 'is-default': address.isDefault }"
                >
                  {{ address.isDefault ? '默认' : '设为默认' }}
                </button>
              </div>
            </div>
          </div>

          <!-- 地址编辑表单 -->
          <div class="address-form" :class="{ 'is-editing': editingAddressIndex !== -1 }">
            <div v-if="editingAddressIndex === -1">
              <button @click="showAddAddressForm" class="add-address-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M10.5 3a.5.5 0 0 1 .5.5v4h4a.5.5 0 0 1 0 1h-4v4a.5.5 0 0 1-1 0v-4h-4a.5.5 0 0 1 0-1h4v-4a.5.5 0 0 1 .5-.5z"/>
                </svg>
                添加地址
              </button>
            </div>

            <div v-else class="address-edit-form" style="background: #ffffff; padding: 20px; border-radius: 10px; border: 1px solid #e9ecef;">
              <div class="form-row">
                <div class="form-group">
                  <label>收件人</label>
                  <input v-model="editingAddress.name" type="text" placeholder="请输入收件人姓名" />
                </div>
                <div class="form-group">
                  <label>电话</label>
                  <input v-model="editingAddress.phone" type="tel" placeholder="请输入联系电话" />
                </div>
              </div>
              
              <div class="form-row">
                <div class="form-group">
                  <label>省份</label>
                  <input v-model="editingAddress.province" type="text" placeholder="请输入省份" />
                </div>
                <div class="form-group">
                  <label>城市</label>
                  <input v-model="editingAddress.city" type="text" placeholder="请输入城市" />
                </div>
                <div class="form-group">
                  <label>区县</label>
                  <input v-model="editingAddress.district" type="text" placeholder="请输入区县" />
                </div>
              </div>
              
              <div class="form-group">
                <label>详细地址</label>
                <textarea 
                  v-model="editingAddress.detail" 
                  placeholder="请输入街道、小区、楼栋号等详细信息"
                  rows="3"
                ></textarea>
              </div>
              
              <div class="form-group checkbox-group">
                <input 
                  type="checkbox" 
                  id="defaultAddress" 
                  v-model="editingAddress.isDefault"
                />
                <label for="defaultAddress">设为默认地址</label>
              </div>
              
              <div class="form-actions">
                <button type="button" @click="cancelAddressEdit" class="cancel-btn">取消</button>
                <button type="button" @click="saveAddress" class="save-btn">
                  <span v-if="!isSavingAddress">保存地址</span>
                  <span v-else class="loading">
                    <svg class="spinner" viewBox="0 0 50 50">
                      <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
                    </svg>
                    保存中...
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 保存按钮 -->
        <div class="form-actions">
          <button type="button" class="cancel-btn" @click="resetForm">取消</button>
          <button type="submit" class="save-btn">
            <span v-if="!isSaving">保存修改</span>
            <span v-else class="loading">
              <svg class="spinner" viewBox="0 0 50 50">
                <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
              </svg>
              保存中...
            </span>
          </button>
        </div>
      </form>
    </div>

    <!-- 头像上传弹窗 -->
    <AvatarUpload 
      v-if="showAvatarUpload" 
      @close="showAvatarUpload = false"
      @upload-success="handleAvatarSuccess"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import AvatarUpload from '/src/views/AvatarUpload.vue';

// 模拟用户数据（新增phone字段）
const user = reactive({
  name: '用户',
  phone: '13800138000', // 新增手机号
  email: 'yonghu@example.com',
  bio: '前端开发者 | 摄影爱好者 | 旅行达人',
  avatar: '',
  addresses: [
    {
      id: 1,
      name: '张三',
      phone: '13800138000',
      province: '广东省',
      city: '深圳市',
      district: '南山区',
      detail: '科技园路100号',
      isDefault: true
    },
    {
      id: 2,
      name: '张三',
      phone: '13800138001',
      province: '北京市',
      city: '北京市',
      district: '海淀区',
      detail: '中关村大街1号',
      isDefault: false
    }
  ]
});

const editableUser = reactive({ ...user });
const newPassword = ref(''); // 新增密码字段
const showAvatarUpload = ref(false);
const isSaving = ref(false);

// 地址编辑状态
const editingAddressIndex = ref(-1); // -1表示未编辑，非-1表示编辑第n个地址
const editingAddress = ref({ detail: '' });
const isSavingAddress = ref(false);

// 保存个人信息（包含地址和密码）
const saveProfile = () => {
  isSaving.value = true;
  // 模拟API请求延迟
  setTimeout(() => {
    Object.assign(user, editableUser);
    
    // 实际项目中需要将newPassword发送到后端
    if (newPassword.value) {
      console.log('发送新密码到后端:', newPassword.value);
      // 这里可以添加密码加密逻辑
    }
    
    isSaving.value = false;
    // 显示成功通知
    showNotification('个人信息已保存！', 'success');
    newPassword.value = ''; // 保存后清空密码输入框
  }, 1500);
};

// 重置表单
const resetForm = () => {
  Object.assign(editableUser, user);
  cancelAddressEdit();
  newPassword.value = ''; // 重置时清空密码输入框
};

// 头像上传成功回调保持不变
const handleAvatarSuccess = (avatarUrl) => {
  user.avatar = avatarUrl;
  showAvatarUpload.value = false;
  showNotification('头像更新成功！', 'success');
};



// ---------------------- 地址管理相关逻辑 ---------------------- //

// 显示添加地址表单
const showAddAddressForm = () => {
  editingAddressIndex.value = -2; // -2表示新增地址
  editingAddress.value = {
    id: Date.now(),
    name: user.name,
    phone: '',
    province: '',
    city: '',
    district: '',
    detail: '',
    isDefault: false
  };
};

// 编辑地址
const editAddress = (index) => {
  editingAddressIndex.value = index;
  editingAddress.value = { ...editableUser.addresses[index] };
};

// 保存地址
const saveAddress = () => {
  isSavingAddress.value = true;
  
  // 如果设为默认地址，先取消其他默认地址
  if (editingAddress.value.isDefault) {
    editableUser.addresses.forEach(addr => {
      addr.isDefault = false;
    });
  }
  
  if (editingAddressIndex.value === -2) {
    // 新增地址
    editableUser.addresses.push({ ...editingAddress.value });
  } else {
    // 更新现有地址
    editableUser.addresses[editingAddressIndex.value] = { ...editingAddress.value };
  }
  
  setTimeout(() => {
    cancelAddressEdit();
    isSavingAddress.value = false;
    showNotification('地址已保存！', 'success');
  }, 1000);
};

// 取消地址编辑
const cancelAddressEdit = () => {
  editingAddressIndex.value = -1;
  editingAddress.value = {
    id: null,
    name: '',
    phone: '',
    province: '',
    city: '',
    district: '',
    detail: '',
    isDefault: false
  };
};

// 删除地址
const deleteAddress = (index) => {
  if (confirm('确认删除该地址？')) {
    const isDefault = editableUser.addresses[index].isDefault;
    editableUser.addresses.splice(index, 1);
    
    // 如果删除的是默认地址且还有地址，设置第一个为默认
    if (isDefault && editableUser.addresses.length > 0) {
      editableUser.addresses[0].isDefault = true;
    }
    
    showNotification('地址已删除！', 'success');
  }
};

// 设置默认地址
const setDefaultAddress = (index) => {
  editableUser.addresses.forEach((addr, i) => {
    addr.isDefault = i === index;
  });
  showNotification('默认地址已设置！', 'success');
};

// 通知功能
const showNotification = (message, type) => {
  // 这里可以集成一个通知组件
  console.log(`${type}: ${message}`);
};
</script>

<style scoped>
/* 基础样式 */
:root {
  --primary-color: #409eff;
  --secondary-color: #66b1ff;
  --accent-color: #5cb3ff;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #909399;
  --text-color: #303133;
  --text-secondary: #606266;
  --border-color: #dcdfe6;
  --border-light: #ebeef5;
  --background-color: #f5f7fa;
  --background-light: #ffffff;
  --transition: all 0.3s ease;
}

.profile-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-color);
}

/* 头部信息样式 */
.profile-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.avatar-container {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

.avatar:hover {
  transform: scale(1.05);
}

.edit-avatar-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

.edit-avatar-btn:hover {
  background: var(--secondary-color);
  transform: translateY(-2px);
}

.edit-avatar-btn svg {
  margin-right: 3px;
}

.username {
  font-size: 1.8rem;
  margin: 10px 0;
  color: var(--text-color);
}

.bio {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}

.stat-item {
  cursor: pointer;
  transition: var(--transition);
}

.stat-item:hover {
  transform: translateY(-3px);
}

.stat-number {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-color);
  display: block;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* 表单区域样式 */
.profile-form {
  background: var(--background-light);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.form-header {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-light);
}

.form-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  color: var(--text-color);
}

.form-header svg {
  color: var(--primary-color);
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-color);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  transition: var(--transition);
  background: var(--background-light);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  outline: none;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

/* 地址区域样式 */
.address-section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--border-light);
}

.address-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
}

.address-title svg {
  color: var(--primary-color);
}

.address-list {
  margin-bottom: 25px;
}

.address-item {
  background: var(--background-color);
  padding: 18px;
  border-radius: 10px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
  border: 1px solid var(--border-light);
}

.address-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.address-content {
  flex: 1;
}

.address-detail {
  margin: 0;
  line-height: 1.6;
  color: var(--text-color);
}

.default-tag {
  display: inline-block;
  background: var(--primary-color);
  color: white;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 8px;
}

.address-actions {
  display: flex;
  gap: 8px;
}

.edit-btn, 
.delete-btn,
.default-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  border: none;
}

.edit-btn {
  background: rgba(64, 158, 255, 0.1);
  color: var(--primary-color);
}

.edit-btn:hover {
  background: rgba(64, 158, 255, 0.2);
  transform: scale(1.1);
}

.delete-btn {
  background: rgba(245, 108, 108, 0.1);
  color: var(--danger-color);
}

.delete-btn:hover {
  background: rgba(245, 108, 108, 0.2);
  transform: scale(1.1);
}

.default-btn {
  background: rgba(103, 194, 58, 0.1);
  color: var(--success-color);
}

.default-btn.is-default {
  background: var(--success-color);
  color: white;
}

.default-btn:hover {
  transform: scale(1.1);
}

.add-address-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background:rgb(166, 166, 222);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(64, 158, 255, 0.3);
}

.add-address-btn:hover {
  background: rgb(141, 218, 189);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.add-address-btn svg {
  font-size: 1.1rem;
}

.address-edit-form {
  background: var(--background-color);
  padding: 20px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
}

.checkbox-group {
  display: flex;
  align-items: center;
}

.checkbox-group input {
  width: auto;
  margin-right: 10px;
}

/* 按钮样式 */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
}

.cancel-btn, 
.save-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.cancel-btn {
  background: var(--background-light);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.cancel-btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.save-btn {
  background:rgb(166, 166, 222);
  color: white;
  border: none;
  box-shadow: 0 2px 10px rgba(64, 158, 255, 0.3);
}

.save-btn:hover {
  background: rgb(141, 218, 189);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

/* 加载动画 */
.loading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spinner {
  animation: rotate 2s linear infinite;
  width: 18px;
  height: 18px;
}

.spinner .path {
  stroke: white;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-header {
    padding: 20px 15px;
  }
  
  .profile-form {
    padding: 20px 15px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .address-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .address-actions {
    margin-top: 15px;
    align-self: flex-end;
  }
  
  .form-actions {
    justify-content: center;
  }
  
  .cancel-btn,
  .save-btn {
    flex: 1;
    text-align: center;
  }
}
/* 地址区域背景优化 */
.address-section {
  background: #f8f9fa !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  margin-top: 30px !important;
  padding: 25px !important;
}

.address-edit-form {
  background: white !important;
  border: 1px solid #e9ecef !important;
  border-radius: 10px !important;
  padding: 20px !important;
}

/* 新增字段样式 */
.form-group.phone, .form-group.password {
  margin-bottom: 25px;
}

.form-group.password {
  margin-top: 25px; /* 密码字段与邮箱间距加大 */
}
</style>